<template>
	<view class="content">
		<view class="modal">

			<view>
				<image class="img" src="/static/login1.jpg"></image>
			</view>
			<view class="title">
				<text>您好，欢迎使用旭春灯饰</text>
			</view>

			<u--form
				class="form"
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="uForm"
			>
				<u-form-item
					prop="name"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.name"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item
					prop="password"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.password"
						border="none"
						:password="true"
					></u--input>
				</u-form-item>

				<view class="remember">
					<checkbox-group style="font-size: 30rpx;">
						<checkbox @tap="check = !check" value="check" :checked="check" />记住密码
					</checkbox-group>
				</view>
				<u-button style="background: #FF8B1A; color: #fff;" @click="handleLogin" >登录</u-button>
			</u--form>


			<view style="display: flex; justify-content: space-between; width: 100%; padding-top: 40rpx;">
				<view style="font-size: 24rpx;">版本号:V {{ version }}</view>
				<!-- <u-button @click="handlePopup" class="network_btn">系统设置</u-button> -->
			</view>
		</view>


		<u-popup :show="show" @close="show = false" @open="show = true" mode="center">
			<view style="" class="popupBox">
				<view class="pupopList" style="background-color: #e7e7e7;">
					<h4>服务/更新地址配置</h4>
				</view>
				<view class="pupopList">
					<text style="margin:0 20rpx 0 10rpx;">服务地址:</text>
					<input type="text" placeholder="请配置服务地址" v-model="formState.customName" @blur="checkCustomId" :disabled="true"/>
					<text class="iconfont icon-saomiao" @tap="scanCode(1)" ></text>
				</view>
				<view class="pupopList">
					<text style="margin:0 20rpx 0 10rpx;">更新地址:</text>
					<input type="text" placeholder="请配置更新地址" v-model="formState.updateUrl"/>
					<text class="iconfont icon-saomiao" @tap="scanCode(2)" ></text>
				</view>
			</view>
		</u-popup>


		<!-- <view style="display: flex; justify-content: center;flex-direction: column; align-items: center; font-size: 28rpx; color: #666;position: fixed;bottom: 10rpx;right: 0;left: 0;">
			<text>义乌市弘兆信息技术有限公司</text>
			<text @tap="makePhoneCall">客服电话:17855898445</text>
		</view> -->

	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { login } from '@/api/modules/login.js'
import md5 from 'js-md5'; 
import { v4 as uuidv4 } from 'uuid';
	export default {
		data() {
			return {
				form: {
					// name: 'test',       // test        // wms
					// password: 'test01', // test01      // wms
					name: uni.getStorageSync('form') ? JSON.parse(uni.getStorageSync('form')).name : '',
					password: uni.getStorageSync('form') ? JSON.parse(uni.getStorageSync('form')).password: '',
				},
				rules: {
					name: {
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				},
				check: true,
				show: false, // 弹出框组件

				formState: {
					customName: '',
					updateUrl: '',
					customId: '',
				},
				version: uni.getStorageSync('bbh')
			}
		},
		methods: {
			handlePopup() { 
				console.log('== ',)
				this.show = true
			},
			checkCustomId() {
				console.log('==  11 checkCustomId')
				// if(!!this.formState.customId) {
				// 	checkAccount(formState.customId)
				// }
			},
			scanCode() {
				uni.scanCode({
				scanType: ['qrCode'],
				hideAlbum: false,
				success: function(res) {
					if(num == 1) {
						// checkAccount(res.result)
						console.log('=== 222')
					} else {
						console.log('=== 333')
						// formState.updateUrl = res.result
						// uni.setStorageSync('updateUrl',formState.updateUrl)
					}
				}
			});
			},

			handleLogin() {
				const { name, password } = this.form || {}
				let timestamp = new Date().getTime().toString(); 
				const uuid = uuidv4();
				let newPassword = md5(password)

				this.$refs.uForm.validate().then( async res => {
					let arr = [name, uuid, timestamp, newPassword];  
					arr.sort();  
					let arrStr = md5(arr.join(''))
					let param = {
						user: name,
						nonce: uuid,
						timestamp,
						sign: arrStr,
						jwt: true, // 是否返回 JWT 令牌
					}
					const newRes = await login(JSON.stringify(param))
					const {  data: { message, status, data } } = newRes || {}
					if (status == 'success') {
						uni.showToast({
							title: '登录成功!',
							duration: 2000,
							icon: 'none'
						});

						uni.redirectTo({
								url: '../enterClass/enterClass'
						});
						uni.setStorageSync('userInfo', JSON.stringify(data));
						uni.setStorageSync('token', JSON.stringify(data.token));

						this.loginAuthor(data.name)
						if(this.check) {
							uni.setStorageSync('form', JSON.stringify(this.form));
						}

					} else if (status == 'fail') {
						uni.showToast({
							title: message,
							duration: 2000,
							icon: 'none'
						});
					}

					// uni.navigateTo({
					// 		url: '../enterClass/enterClass'
					// });
					// let data = {
					// 	us_name: '包大大'
					// }
					// uni.setStorageSync('userInfo', JSON.stringify(data));
					
				})
				
			},
			makePhoneCall(){
				uni.makePhoneCall({
					phoneNumber: '17855898445' //仅为示例
				});
			},
			...mapMutations([
                'loginAuthor'
            ]),
		}
	}
</script>

<style lang="less" scoped>

.content {
	display: flex;
	flex-direction: row-reverse;
    align-items: center;
	height: 100vh;
	width: 100vw;
	background-color: #FF8B1A;
	background-image: url("/static/login_bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	.modal {
		// position: absolute;
		padding: 40rpx;
		margin-right: 100rpx;
		// right: 60rpx;
		// top: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		// height: 100%;
		background: #fff;
		border-radius: 10rpx;

		.img {
			width: 220rpx;
			height: 220rpx;
			margin-top: 114rpx;
		}

		.title {
			margin: 31rpx 0;
			font-size: 30rpx;
		}
		
		
		.form {
			width: 500rpx;
			// border: 1rpx solid #ccc;

			.remember {
				display: flex;
				justify-content: end;
				padding-top: 40rpx;
				margin-bottom: 40rpx;

			}
		}

		.network_btn {
			
			border: 1px solid #FF9C00;
			border-radius: 4rpx;
			color: #FF9C00;
			font-size: 24rpx;
			margin: 0;
			width: 168rpx;
			height: 45rpx;
			line-height: 45rpx;
			float: right;
		}
	}


	.popupBox {
		width: 35vw;
		height: 40vh;
		background: #fff;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 20rpx;
		.pupopList {
			height: 80rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			padding-left: 10rpx;
			h4 {
				font-size: 34rpx;
				margin: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				padding-left: 10rpx;
			}
			input {
				border: 1px solid #ccc;
				border-radius: 8rpx;
				font-size: 26rpx;
				padding-left: 10rpx;
				height: 60rpx;
				width: 65%;
			}
			.iconfont {
				font-size: 70rpx;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
